
<ion-header>

  <ion-navbar>
    <ion-title>选择常用设备</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <!--<div class="selected-device"></div>-->
  <div  style="display: flex;text-align: center;">
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[0]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="sunny" class="home-scene-icon" style="color: coral"></ion-icon>
      <p>电视</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[1]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="snow" class="home-scene-icon" style="color: pink"></ion-icon>
      <p>灯</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[2]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="plane" class="home-scene-icon" style="color: lightskyblue"></ion-icon>
      <p>空调</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[3]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="musical-notes" class="home-scene-icon" style="color: cyan"></ion-icon>
      <p>热水器</p>
    </div>
  </div>

  <div  style="display: flex;text-align: center;">
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[4]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="sunny" class="home-scene-icon" style="color: coral"></ion-icon>
      <p>设备5</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[5]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="snow" class="home-scene-icon" style="color: pink"></ion-icon>
      <p>设备6</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[6]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="plane" class="home-scene-icon" style="color: lightskyblue"></ion-icon>
      <p>设备7</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[7]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="musical-notes" class="home-scene-icon" style="color: cyan"></ion-icon>
      <p>设备8</p>
    </div>
  </div>

  <div  style="display: flex;text-align: center;">
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[8]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="sunny" class="home-scene-icon" style="color: coral"></ion-icon>
      <p>设备9</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[9]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="snow" class="home-scene-icon" style="color: pink"></ion-icon>
      <p>设备10</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[10]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="plane" class="home-scene-icon" style="color: lightskyblue"></ion-icon>
      <p>设备11</p>
    </div>
    <div class="flex-1">
      <div class="scene-checkbox" >
        <ion-item style="background:none;">
          <ion-checkbox [(ngModel)]="scene_list[11]"></ion-checkbox>
        </ion-item>
      </div>
      <ion-icon name="musical-notes" class="home-scene-icon" style="color: cyan"></ion-icon>
      <p>设备12</p>
    </div>

  </div>

  <div style="text-align: center">
    <button ion-button color="primary" (click)="abc()">确定</button>
  </div>
</ion-content>
